<template>
<layoutHeader></layoutHeader>
  <div class="title_small">查询评价</div>
  <div class="mainbox">

    <div class="query-form">
        <span id="t">信访事项查询</span>
        <input type="text" id="nameInput" placeholder="请输入姓名" v-model="query.name">
        <input type="text" id="eventCodeInput" placeholder="请输入事件码"  v-model="query.eventID">
        <button @click="eventQuery">查询</button>
        <button @click="cancel">取消</button>
    </div>
          
    <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @click="handleClick">

      <el-tab-pane label="我的信访" name="first">
      <div>

<el-card class="page-container">
  <el-table :data="petitions" style="width: 100%">
    <el-table-column label="序号" width="100" type="index">
    </el-table-column>
    <el-table-column label="标题" prop="title"></el-table-column>
    <el-table-column
      label="事件码"
      prop="eventID"
    ></el-table-column>
    <el-table-column label="时间" prop="createdAt"></el-table-column>
    <el-table-column label="操作" width="100">
      <template #default="{ row }">
        <el-button
          type="primary"
          @click="showDetail3(row)"
          :icon="Search"
          circle
        ></el-button>
      </template>
    </el-table-column>
    <template #empty>
      <el-empty description="空空如也" />
    </template>
  </el-table>
</el-card>


</div>
    </el-tab-pane>

    <el-tab-pane label="我的写信" name="second">
        <div>

        <el-card class="page-container">
          <el-table :data="letters" style="width: 100%">
            <el-table-column label="序号" width="100" type="index">
            </el-table-column>
            <el-table-column
              label="信件码"
              prop="mailboxID"
            ></el-table-column>
            <el-table-column label="时间" prop="createdAt"></el-table-column>
            <el-table-column label="状态" prop="createdAt"></el-table-column>
            <el-table-column label="操作" width="100">
      <template #default="{ row }">
        <el-button
          type="primary"
          @click="showDetail(row)"
          :icon="Search"
          circle
        ></el-button>
      </template>
    </el-table-column>
            
            <template #empty>
              <el-empty description="空空如也" />
            </template>
          </el-table>
        </el-card>
  
    
        </div>
    </el-tab-pane>
    <el-tab-pane label="领导回信" name="third">
      <div>

<el-card class="page-container">
  <el-table :data="replys" style="width: 100%">
    <el-table-column label="序号" width="100" type="index">
    </el-table-column>
    <el-table-column
      label="回复码"
      prop="replyId"
    ></el-table-column>
    <el-table-column label="回复人" prop="leaderName"></el-table-column>
    <el-table-column label="时间" prop="createdAt"></el-table-column>
    <el-table-column label="操作" width="100">
      <template #default="{ row }">
        <el-button
          type="primary"
          @click="showDetail2(row)"
          :icon="Search"
          circle
        ></el-button>
      </template>
    </el-table-column>
    <template #empty>
      <el-empty description="空空如也" />
    </template>
  </el-table>
</el-card>


</div>
    </el-tab-pane>
    
    </el-tabs>

    <!--详情抽屉(我的写信)-->
    <el-drawer
          v-model="detail_visi"
          title=""
          :append-to-body="true"
          size="100%"
          class="drawer1"
        >
        <div class="pro">
          <h2>处理进度</h2>
          <el-timeline style="max-width: 600px">
             <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :hollow="activity.hollow"        
              :timestamp="activity.timestamp"
            >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
        </div>

        <div class="divider2"></div>

        <div class="detailbox">
          <h2 class="protitle">信件详情</h2>
          <!-- 添加item表单 -->
          <el-card style="max-width: 100%">
            <template #header>
              <div class="card-header">
                <span>记录详情</span>
              </div>
            </template>
            <!--内容区-->
            <p class="text item">信件编号</p>
            <p class="text item">{{ letterModel.mailboxID }}</p>
            <p class="text item">用户</p>
            <p class="text item">{{ letterModel.userID }}</p>
            <p class="text item">时间</p>
            <p class="text item">{{ letterModel.createdAt }}</p>
            <p class="text item">内容</p>
            <p class="text item">{{ letterModel.messageContent }}</p>
            <p class="text item">致信部门</p>
            <p class="text item">{{ letterModel.leader_Dep }}</p>
            <p class="text item">致信领导</p>
            <p class="text item">{{ letterModel.leaderName }}</p>
            <p class="text item">附件</p>

            <template #footer>
              <el-button type="primary" @click="detail_visi=false">确定</el-button>
            </template>
          </el-card>

        </div>
        </el-drawer>

        <!--详情抽屉(领导回信)-->
    <el-drawer
          v-model="detail_visi3"
          title=""
          :append-to-body="true"
          size="100%"
          class="drawer1"
        >

        <div class="detailbox">
          <h2 class="protitle">回信详情</h2>
          <!-- 添加item表单 -->
          <el-card style="max-width: 100%">
            <template #header>
              <div class="card-header">
                <span>回信详情</span>
              </div>
            </template>
            <!--内容区-->
            <p class="text item">信件编号</p>
            <p class="text item">{{ replyModel.mailboxId }}</p>
            <p class="text item">领导姓名</p>
            <p class="text item">{{ replyModel.leaderName }}</p>
            <p class="text item">时间</p>
            <p class="text item">{{ replyModel.replyDate }}</p>
            <p class="text item">内容</p>
            <p class="text item">{{ replyModel.replyContent}}</p>
            <p class="text item">附件</p>

            <template #footer>
              <el-button type="primary" @click="detail_visi3=false">确定</el-button>
              <el-button type="primary" @click="rate=true">评价</el-button>
            </template>
          </el-card>

             
          
          <el-dialog
    v-model="rate"
    title="服务评价"
    width="500"
    :before-close="handleClose1"
  >
    <span>请评价</span>
    <el-rate
           v-model="value"
           :texts="['非常不满意', '不满意', '一般', '满意', '非常满意']"
           show-text
          />  
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose1">取消</el-button>
        <el-button type="primary" @click="handleClose2">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

              
           
        </div>
        </el-drawer>

        <!--详情抽屉(信访)-->
    <el-drawer
          v-model="detail_visi2"
          title=""
          :append-to-body="true"
          size="100%"
          class="drawer1"
        >
        <div class="pro">
          <h2>处理进度</h2>
          <el-timeline style="max-width: 600px">
             <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :hollow="activity.hollow"        
              :timestamp="activity.timestamp"
            >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
        </div>

        <div class="divider2"></div>

        <div class="detailbox">
          <h2 class="protitle">信访详情</h2>
          <!-- 添加item表单 -->
          <el-card style="max-width: 100%">
            <template #header>
              <div class="card-header">
                <span>记录详情</span>
              </div>
            </template>
            <!--内容区-->
            <p class="text item">标题</p>
            <p class="text item">{{ petitionModel.title }}</p>
            <p class="text item">时间</p>
            <p class="text item">{{ petitionModel.createdAt }}</p>
            <p class="text item">关键词</p>
            <p class="text item">{{ petitionModel.keyWord }}</p>
            <p class="text item">事件码</p>
            <p class="text item">{{ petitionModel.eventId }}</p>
            <p class="text item">上访部门</p>
            <p class="text item">{{ petitionModel.petitionDep }}</p>
            <p class="text item">附件</p>

            <template #footer>
              <el-button type="primary" @click="detail_visi2=false">确定</el-button>
              <el-button type="primary" @click="rate=true">评价</el-button>
            </template>
          </el-card>

             
          
          <el-dialog
    v-model="rate"
    title="服务评价"
    width="500"
    :before-close="handleClose1"
  >
    <span>请评价</span>
    <el-rate
           v-model="value"
           :texts="['非常不满意', '不满意', '一般', '满意', '非常满意']"
           show-text
          />  
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose1">取消</el-button>
        <el-button type="primary" @click="handleClose2">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

              
           
        </div>
        </el-drawer>

    <!--分页-->
    <div class="demo-pagination-block">
    <div class="demonstration"></div>
    <el-pagination
      v-model:current-page="currentPage3"
      v-model:page-size="pageSize3"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="10"
    
    />
  </div>
  </div>
<layoutFooter></layoutFooter>
</template>

<script setup>
import {ref} from 'vue'
import layoutHeader from '@/components/layoutHeader.vue'
import layoutFooter from '@/components/layoutFooter.vue'
import { getInfoService } from '@/api/user';
import { getAllReplyService,getAllPetitionService,getOnePetiotionService,getAllLetterService,getOneLetterService,getLaederReplyService,postRateService } from '@/api/func';
import { usePhoneStore } from '@/stores/phone';
import { Edit, Delete, Search } from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus';

const phoneStore = usePhoneStore();
const activeName = ref('first');


const currentPage3 = ref(1)
//评分
const value = ref(0)
const pageSize3 = ref(3)
const detail_visi =ref(false) 
const detail_visi2 =ref(false) 
const detail_visi3 =ref(false) 
const background = ref(false)
const disabled = ref(false)
const rate = ref(false)


//信访事项集数据模型
const  petitions = ref( [{
  createdAt: '2009-2-1',
  description: '',
  eventID: 993332,
  eventType: null,
  filePath: '',
  keywords: null ,
  petitionDep: '',
  status: null,
  title: '关于某某企业污染环境',
  userID: null,
},
])

//信访详情
const petitionModel = ref({
  createdAt: '',
  description: '',
  eventId: 0,
  filePath: '',
  keyWord: '',
  petitionDep: '',
  status:'',
  title: '',
})

//领导回信
const replyModel = ref({
        "replyId": 1,
        "mailboxId": 2,
        "leaderName": "邓志豪",
        "replyDate": "2024-07-09T09:43:15",
        "replyContent": "hhh",
        "attachmentLink": null
    })

//回信数组
const replys = ref([{
  "replyId": 1,
  "mailboxId": 2,
  "leaderName": "邓志豪",
  "replyDate": "2024-07-09T09:43:15",
  "replyContent": "hhh",
  "attachmentLink": null
},
])

//用户信件
const letterModel = ref({
      "mailboxID": 1,
      "userID": 10000000,
      "leader_Dep": "重庆信访办",
      "messageContent": null,
      "status": "待处理",
      "createdAt": "2024-07-08T09:57:32",
      "leaderName": "邓志豪" 
})
//用户所有信件
const letters = ref([
{
      "mailboxID": 1,
      "userID": 10000000,
      "leader_Dep": "重庆信访办",
      "messageContent": null,
      "status": "待处理",
      "createdAt": "2024-07-08T09:57:32",
      "leaderName": "邓志豪"
    },
])

//获取验证码数据模型
const captchaModel = ref({
	phone:'',
	captcha:''
})


//查询用户id用于获取信访记录
const getPetitions = async()=>{
  let result = await getInfoService(phoneStore.phone);
  console.log(result.data.userId);
  let result2 = await getAllPetitionService(result.data.data.userId);
  console.log ("获取用户信息"+result.data);
  console.log ("获取所有信访记录"+result2.data);
  petitions.value = result2.data.data;
}

onMounted(getPetitions);

//查询某一信访记录
const getPetition =async(petitionId)=>{
  let result = await getInfoService(phoneStore.phone);
  let DataObj2={
    userid:result.data.data.userId,
    pettionid:petitionId
  }
  let result2 = await getOnePetiotionService(DataObj2);
  console.log('查询单一记录'+result2.data);
  petitionModel.value = result2.data.data;
}

//获取用户所有信件
const getLetters  = async()=>{
  let userInfo = await getInfoService(phoneStore.phone);
  let DataObj2 = {
    userId:userInfo.data.data.userId
  }
  let result = await getAllLetterService(DataObj2);
  console.log("获取所有信件"+result.data.data);
  letters.value = result.data.data;
}
//获取某一具体信件
const getLetter = async(mailBoxId)=>{
  let DataObj = {
    mailboxid : mailBoxId
  }
  let result = await getOneLetterService(DataObj);
  console.log("获取某一信件"+result.data);
  letterModel.value = result.data;

}
const getReply = async(mailboxId)=>{
  let DataObj1 = {
    phone:phoneStore.phone
  }
  let result1 = await getInfoService(DataObj1);
  let DataObj = {
    userid:result1.data.data.userId,
    mailboxid:mailboxId
  }
  let result = await getLaederReplyService(DataObj);
  console.log('获取某一回信'+result.data);
  replyModel.value = result.data.data;

}
const getReplys = async()=>{
  let userInfo = await getInfoService(phoneStore.phone);
  console.log(userInfo.data);
  let result = await getAllReplyService(userInfo.data.data.userId);
  console.log("获取所有回信"+result.data.data);
  replys.value = result.data.data;
}


//查看某一信件的详细信息
const showDetail =(raw)=>{
     letterModel.value = getLetter(raw.mailBoxId);
     detail_visi.value = true;
}
//查看某一回信的详细信息
const showDetail2 =(raw)=>{
  replyModel.value = getReply(raw.mailBoxId);
  detail_visi3.value = true;
}
//查看某一信访的详细信息
const showDetail3 =(raw)=>{
     petitionModel.value = getPetition(raw.eventID);
     detail_visi2.value = true;
}

//搜索模型
const query = ref({
  name:'',
  eventID:''
})



//记录搜索
const eventQuery = ()=>{
  let temp =null;
  let j = 0;
 
      for(let i = 0;i<petitions.value.length;i++){
      if(petitions.value[i].eventID==query.value.eventID){
        temp.value[j] = petitions.value[i];
        j++;
      }
if(temp){
  ElMessage.success('查询成功');
  petitions.value = temp.value;
}else{
  ElMessage.warning('未找到相关记录');
}

 
}
}
//取消查询
const cancel = ()=>{
//清空
query.value.eventID='';
query.value.name='';
getPhone();
}

//进度
import { MoreFilled } from '@element-plus/icons-vue'

const activities = [
  {
    content: '已提交',
    timestamp: '2018-04-12 20:46',
    size: 'large',
    type: 'primary',
    icon: MoreFilled,
  },
  {
    content: '待审核',
    timestamp: '2024-07-03 20:46',
    color: '#0bbd87',
  },
  {
    content: '审核通过',
    timestamp: '2024-07-04 20:46',
    size: 'large',
  },
  {
    content: '处理中',
    timestamp: '2024-07-04 20:46',
    type: 'primary',
    hollow: true,
  },
  {
    content: '处理完毕',
    timestamp: '2024-07-08 20:46',
  },
]

//取消评价
const handleClose1 = () => {
  ElMessageBox.confirm(
    '退出评价?',
    '',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      rate.value = false;
    })
    .catch(() => {
    })
}

//提交评价
const handleClose2 = () => {
  console.log("当前评分："+value.value);
  ElMessageBox.confirm(
    '确定提交评价?',
    '',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      let Data = {
        petitionId:petitionModel.value.eventId,
        degree:value.value
      }
      await postRateService(Data);
      ElMessage({
        type: 'success',
        message: '评价成功',
      })
      rate.value = false;
    })
    .catch(() => {
    
    })
  }

//根据tab选择调用函数
const handleClick = (tab) => {
      switch (activeName.value) {
        case 'first':
          console.log(1);
          getPetitions();
          break;
        case 'second':
          console.log(2);
          getLetters();
          break;
        case 'third':
          console.log(3);
          getReplys();
        // 为其他activeName添加case
        default:
          console.log('未定义的标签页');
      }
    };

  //获取状态
  const getStatus = ()=>{

  }

</script>

<style>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.mainbox{
  width: 80%;
  margin-left:10%;
  display: flex;
  flex-direction: column;          /* 使用Flexbox布局 */
  justify-content: center;  /* 水平居中对齐 */
  align-items: center;
}

    /* 添加一些基本样式 */
    .mainbox {
            font-family: Arial, sans-serif;
    
        }
        .query-form {
            display: flex;
            align-items: center;
            margin: 0 auto;
            width: 100%;
        }
        .query-form input[type="text"] {
            margin-right: 4%;
            padding: 8px;
            border: 1px solid black;
        }
        .query-form button {
            padding: 8px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .query-form button:hover {
            background-color: #0056b3;
        }

        #t{
            width:15%;
            font-size: 20px;
            color: #0056b3;
            font-weight: 600;
            margin-left: 17%;
        }
    .el-tabs{
        width: 100%;
        margin-top:1%;
    }

.drawer1{
  display: flex;
  flex-direction: row;
}
.pro{
  margin-left: 5%;
  width: 20%;
  height: 100%;
  padding-left:3%;
  padding-top: 3%;
}
.detailbox{
  width:50%;
  margin-left:4%;
  position:absolute;
  top: 10%;
  left: 35%;
}
.prodetail{
width: 90%;
margin-left:10%;
height: 80%;
margin-top: 10%;
}
.protitle{
  font-size: 25px;
  color: #0056b3;
  margin-bottom: 2%;
  font-weight: 600;
}
.divider2 {
  width: 2px; /* 分线宽度 */
  background-color: #2154cc; /* 分线颜色 */
  margin-left:3%; /* 左右边距，根据需要调整 */
  height: 80%; /* 确保分割线高度占满元素的高度 */
  margin-top:10%;
  display: inline-block; /* 使元素内联显示 */
  vertical-align: middle; /* 垂直居中对齐 */
  position:absolute;
  top: -10%;
  left: 25%;
}
/*分割线 */
.element-divider {
  border-bottom: 1px solid #9dcde7; /* 灰色分割线 */
  height: 1px; /* 分线高度 */
  margin: 10px 5%; /* 上下边距 */
}
</style>